<template>
  <div class="employee-edit-container">
    <el-card class="edit-card">
      <template #header>
        <div class="card-header">
          <div class="header-content">
            <div class="header-title">
              <el-icon class="title-icon">
                <component :is="isEdit ? 'EditPen' : 'UserFilled'" />
              </el-icon>
              <span class="title">{{ isEdit ? '编辑客户信息' : '新增客户' }}</span>
            </div>
            <div class="header-subtitle">请填写客户详细信息</div>
          </div>
          <div class="action-buttons">
            <el-button @click="goBack" class="cancel-btn">
              <el-icon><Close /></el-icon>
              <span>取消</span>
            </el-button>
            <el-button type="primary" @click="submitForm" class="submit-btn">
              <el-icon><Check /></el-icon>
              <span>保存</span>
            </el-button>
          </div>
        </div>
      </template>

      <el-form 
        ref="formRef" 
        :model="formData" 
        :rules="rules" 
        label-width="140px"
        label-position="right"
        class="custom-form"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <el-divider content-position="left" class="section-divider">
            <div class="divider-content">
              <el-icon class="section-icon"><User /></el-icon>
              <span class="section-title">基本信息</span>
            </div>
          </el-divider>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="姓名：" prop="name">
                <el-input 
                  v-model="formData.name" 
                  placeholder="请输入姓名" 
                  clearable
                  class="custom-input"
                >
                  <template #prefix>
                    <el-icon><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别：" prop="gender">
                <el-radio-group v-model="formData.gender" class="custom-radio-group">
                  <el-radio :label="1" class="custom-radio">
                    <el-icon><Male /></el-icon> 男
                  </el-radio>
                  <el-radio :label="0" class="custom-radio">
                    <el-icon><Female /></el-icon> 女
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="年龄：" prop="age">
                <el-input-number 
                  v-model="formData.age" 
                  :min="18" 
                  :max="70" 
                  controls-position="right"
                  class="custom-input-number"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 健康状态 -->
        <div class="form-section">
          <el-divider content-position="left" class="section-divider">
            <div class="divider-content">
              <el-icon class="section-icon"><FirstAidKit /></el-icon>
              <span class="section-title">健康状态</span>
            </div>
          </el-divider>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="健康分级：" prop="healthStatus">
                <el-select 
                  v-model="formData.healthStatus" 
                  placeholder="请选择健康状态"
                  clearable
                  class="custom-select"
                >
                  <template #prefix>
                    <el-icon><Histogram /></el-icon>
                  </template>
                  <el-option
                    v-for="healthStatus in healthStatusOpition"
                    :key="healthStatus.value"
                    :label="healthStatus.label"
                    :value="healthStatus.value"
                    class="custom-option"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 护理负责人 -->
        <div class="form-section">
          <el-divider content-position="left" class="section-divider">
            <div class="divider-content">
              <el-icon class="section-icon"><Avatar /></el-icon>
              <span class="section-title">护理负责人</span>
            </div>
          </el-divider>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="护理人员：" prop="caregiverId">
                <el-input 
                  v-model="formData.caregiverId" 
                  placeholder="请输入护理人员ID" 
                  clearable
                  class="custom-input"
                >
                  <template #prefix>
                    <el-icon><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="客服主管：" prop="csManagerId">
                <el-input 
                  v-model="formData.csManagerId" 
                  placeholder="请输入客服主管ID" 
                  clearable
                  class="custom-input"
                >
                  <template #prefix>
                    <el-icon><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { findById, save } from '@/api/elderInfo'
import { ElMessage } from 'element-plus'
import {
  User,
  Male,
  Female,
  FirstAidKit,
  Avatar,
  EditPen,
  UserFilled,
  Close,
  Check,
  Histogram
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const formRef = ref()

const healthStatusOpition = ref([
  { value: 1, label: '良好' },
  { value: 2, label: '一般' },
  { value: 3, label: '较差' },
  { value: 4, label: '病重' }
])

const formData = reactive({
  name: '',
  gender: 1,
  age: 60,
  healthStatus: '',
  caregiverId: '',
  csManagerId: ''
})

const isEdit = computed(() => route.query.id !== undefined)

const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
  healthStatus: [{ required: true, message: '请选择健康状态', trigger: 'change' }]
}

const loadEmployeeData = async (id) => {
  try {
    const res = await findById(id)
    Object.assign(formData, res.data)
    if (res.data.caregiver) {
      formData.caregiverId = res.data.caregiverId
    }
    if (res.data.csManager) {
      formData.csManagerId = res.data.csManagerId
    }
  } catch (error) {
    console.error('加载客户数据失败:', error)
    ElMessage.error('加载客户数据失败')
  }
}

const submitForm = async () => {
  try {
    await formRef.value.validate()
    
    if (isEdit.value) {
      await save(formData)
      ElMessage.success('客户信息更新成功')
    } else {
      await save(formData)
      ElMessage.success('客户添加成功')
    }
    
    goBack()
  } catch (error) {
    console.error('保存失败:', error)
    if (!error.response) {
      ElMessage.error('表单验证失败，请检查输入')
    }
  }
}

const goBack = () => {
  router.go(-1)
}

onMounted(() => {
  if (isEdit.value) {
    loadEmployeeData(route.query.id)
  }
})
</script>

<style scoped>
.employee-edit-container {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f0fe 100%);
  min-height: 100vh;
}

.edit-card {
  margin: 0 auto;
  max-width: 1000px;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(67, 97, 238, 0.15);
  border: none;
  overflow: hidden;
  transition: all 0.3s ease;
}

.edit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(67, 97, 238, 0.2);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  background: linear-gradient(90deg, #f8fafc 0%, #f0f4ff 100%);
  border-bottom: 1px solid rgba(235, 238, 245, 0.8);
}

.header-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  color: #4361ee;
  background: rgba(67, 97, 238, 0.1);
  padding: 8px;
  border-radius: 10px;
}

.title {
  font-size: 22px;
  font-weight: 600;
  color: #1a1f36;
  letter-spacing: 0.5px;
}

.header-subtitle {
  font-size: 14px;
  color: #64748b;
  margin-left: 44px;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.cancel-btn {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
}

.submit-btn {
  padding: 10px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
}

.submit-btn:hover {
  background: linear-gradient(135deg, #3a56d4 0%, #324bc0 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(67, 97, 238, 0.3);
}

.custom-form {
  padding: 28px;
}

.form-section {
  margin-bottom: 32px;
}

.section-divider {
  margin: 32px 0 24px;
  border-top: 1px dashed rgba(67, 97, 238, 0.2);
}

.divider-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 16px;
  background: white;
}

.section-icon {
  color: #4361ee;
  font-size: 20px;
}

.section-title {
  font-size: 17px;
  font-weight: 600;
  color: #1a1f36;
  letter-spacing: 0.3px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #4b5563;
  font-size: 15px;
}

.custom-input {
  width: 100%;
}

.custom-input :deep(.el-input__inner) {
  border-radius: 10px;
  height: 42px;
  padding-left: 40px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.custom-input :deep(.el-input__inner:hover) {
  border-color: #c7d2fe;
}

.custom-input :deep(.el-input__inner:focus) {
  border-color: #4361ee;
  box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
}

.custom-input :deep(.el-input__prefix) {
  display: flex;
  align-items: center;
  padding-left: 12px;
  color: #9ca3af;
}

.custom-radio-group {
  display: flex;
  gap: 24px;
}

.custom-radio {
  --el-radio-input-border-color-hover: #4361ee;
  --el-radio-input-border-color: #d1d5db;
  --el-radio-text-color: #4b5563;
}

.custom-select {
  width: 100%;
}

.custom-select :deep(.el-input__inner) {
  border-radius: 10px;
  height: 42px;
  border: 1px solid #e5e7eb;
}

.custom-select :deep(.el-input__prefix) {
  display: flex;
  align-items: center;
  padding-left: 12px;
  color: #9ca3af;
}

.custom-input-number {
  width: 100%;
}

.custom-input-number :deep(.el-input-number__decrease),
.custom-input-number :deep(.el-input-number__increase) {
  background-color: #f3f4f6;
  color: #6b7280;
  border-radius: 8px;
}

.custom-input-number :deep(.el-input__inner) {
  text-align: left;
  border-radius: 10px;
  height: 42px;
}

.custom-option {
  padding: 10px 16px;
  transition: all 0.2s ease;
}

.custom-option:hover {
  background-color: #f0f4ff;
  color: #4361ee;
}

@media (max-width: 768px) {
  .edit-card {
    margin: 0 16px;
    border-radius: 12px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
  }
  
  .header-content {
    width: 100%;
  }
  
  .header-subtitle {
    margin-left: 0;
    padding-left: 44px;
  }
  
  .action-buttons {
    width: 100%;
    justify-content: flex-end;
  }
  
  .custom-form {
    padding: 16px;
  }
  
  .el-col {
    width: 100%;
    max-width: 100%;
  }
}
</style>